<script setup lang="ts" name="InputIconPicker">
import { getIconList, iconTypeList } from '@/plugins/svgIcon'
import { cloneDeep } from 'lodash-es'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('icon-picker')
const { t } = useI18n() // 国际化
const iconList = getIconList()
const iconTypeData = iconTypeList()

const props = defineProps({
  icon: { type: String, default: '' }
})

const emit = defineEmits(['update:icon'])
const iconValue = ref(props.icon)

type searchDataType = {
  pageIndex: number,
  pageSize: number,
  type: string | undefined,
  name: string,
  fontSize: number,
  isColor: boolean,
}

const searchData = ref<searchDataType>({
  pageIndex: 1,
  pageSize: 30,
  type: undefined,
  name: '',
  fontSize: 18,
  isColor: false
})

const getInitData = () => {
  initData.value.data = []
  let resultData = cloneDeep(iconList)
  if (searchData.value.type) {
    resultData = resultData.filter((item: any) => { return item.type === searchData.value.type })
  }
  if (searchData.value.name !== '') {
    resultData = resultData.filter((item: any) => { return item.key.includes(searchData.value.name) })
  }
  initData.value.total = resultData.length
  initData.value.data = resultData.slice(
    searchData.value.pageSize * (searchData.value.pageIndex - 1),
    searchData.value.pageSize * (searchData.value.pageIndex - 1) + searchData.value.pageSize
  )
  initData.value.data.forEach((item) => {
    const icon = item.type + ':' + item.key
    if (iconValue.value !== '') {
      if (iconValue.value === icon) {
        item.isSelected = true
      } else {
        item.isSelected = false
      }
    } else {
      item.isSelected = false
    }
  })
}

const initData: any = ref({
  data: [],
  total: 0
})

const handleSizeChange = (val: number) => {
  searchData.value.pageSize = val
  searchData.value.pageIndex = 1
  getInitData()
}

const handleCurrentChange = (val: number) => {
  searchData.value.pageIndex = val
  getInitData()
}

getInitData()

const searchChangeHandler = () => {
  searchData.value.pageIndex = 1
  getInitData()
}

const selectIconHandler = (item) => {
  iconValue.value = item.type + ':' + item.key
  initData.value.data.forEach((item) => {
    const icon = item.type + ':' + item.key
    if (iconValue.value !== '') {
      if (iconValue.value === icon) {
        item.isSelected = true
      } else {
        item.isSelected = false
      }
    } else {
      item.isSelected = false
    }
  })
  emit('update:icon', iconValue.value)
}

const valueChangeHandler = (v) => {
  emit('update:icon', v)
}

watch(
  () => props.icon,
  (v) => {
    iconValue.value = v
  }
)
</script>
<template>
  <div :class="prefixCls">
    <ElInput v-model="iconValue" clearable :placeholder="t('common.icon.rules', 'select')" @change="valueChangeHandler">
      <template #append>
        <ElPopover :width="376" trigger="click">
          <template #reference>
            <ElButton :class="`${prefixCls}-popover-button`"><SvgIcon :icon="(!iconValue || iconValue === '' ? 'ep:plus' : iconValue)" size="13" /></ElButton>
          </template>
          <div :class="`${prefixCls}-popover-wrapper`">
            <ElForm :inline="true">
              <ElFormItem>
                <ElInput v-model="searchData.name" :placeholder="t('common.icon.rules', 'name')" clearable style="width: 340px" @change="searchChangeHandler">
                  <template #prepend>
                    <ElSelect v-model="searchData.type" :placeholder="t('common.icon.rules', 'type')" style="width: 152px" clearable :teleported="false" @change="searchChangeHandler">
                      <ElOption v-for="(item, index) in iconTypeData" :key="index" :label="t('common.icon.type', item.label)" :value="item.value" />
                    </ElSelect>
                  </template>
                  <template #append>
                    <ElButton icon="Search" @click="searchChangeHandler" />
                  </template>
                </ElInput>
              </ElFormItem>
            </ElForm>
            <ElRow>
              <ElCol v-for="(item, index) in initData.data" :key="index" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <ElButton :type="item.isSelected ? 'primary' : ''" :title="item.key" @click="selectIconHandler(item)">
                  <SvgIcon :icon="item.type + ':' + item.key" />
                </ElButton>
              </ElCol>
            </ElRow>
            <ElPagination
              v-if="initData.total > 0"
              v-model:currentPage="searchData.pageIndex"
              v-model:page-size="searchData.pageSize"
              :page-sizes="[30, 60, 90, 120]"
              :pager-count="5"
              :background="true"
              layout="total, prev, next, jumper"
              :total="initData.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </ElPopover>
      </template>
    </ElInput>
  </div>
</template>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-icon-picker;

.#{$prefix-cls} {
  display: flex;
  flex: 1;
  margin: 6px;

  .el-input {
    flex: 1;

    :deep(.el-input__wrapper) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    :deep(.el-input-group__append) {
      width: var(--el-input-height);
      padding: 0;

      button.el-button{
        width: var(--el-input-height);
        padding: 0;
        margin: 0;
        color: var(--el-text-color-regular)
      }
    }
  }

  &-popover-button {
    position: relative;
    z-index: 1;
    padding: 8px;
    margin-left: -1px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;

    &.el-button--small {
      padding: 5px 0;
    }

    &.el-button--large {
      padding: 12px 7px;
    }
  }
}

.#{$prefix-cls}-popover-wrapper {
  .el-row {
    .el-col {
      .el-button {
        padding: 20px 13px;
        margin: 6px;

        .el-icon {
          font-size: 20px !important;
        }
      }
    }
  }

  .el-pagination {
    justify-content: center;
    margin-top: 6px;
  }
}
</style>
